<template>
  <el-container class="attendance-settings-container">
    <!-- 顶部标题和保存按钮 -->
    <el-header class="header">
      <div class="header-left">
        <span class="title">考勤设置</span>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-header>

    <!-- 内容区域 -->
    <el-main class="main-content">
      <div class="content-wrapper">
        <!-- 左侧：考勤时间设置 -->
        <div class="left-section">
          <div class="title-header">
            <div class="section-title">
              <div class="title-bar"></div>
              <div class="title-text">考勤时间</div>
            </div>
            <!-- 警告提示 -->
            <div class="warning-banner">
              <el-icon class="warning-icon">
                <WarningFilled />
              </el-icon>
              <span class="warning-text">该项设置修改后在下月一号自动生效</span>
            </div>
          </div>

          <!-- 工作日设置 -->
          <div class="form-section">
            <div class="form-label">工作日设置</div>
            <div class="weekday-checkboxes">
              <el-checkbox v-for="(day, index) in weekdays" :key="index" v-model="day.checked" :label="day.label"
                class="weekday-checkbox" />
            </div>
          </div>

          <!-- 打卡时间段设置 -->
          <div class="form-section">
            <div class="form-label">打卡时间段设置</div>
            <div class="shifts-container">
              <!-- 上午班次 -->
              <div class="shift-setting">
                <div class="shift-title">上午班次</div>
                <div class="time-inputs">
                  <div class="time-input-item">
                    <span class="time-label">开始时间</span>
                    <el-time-picker v-model="morningShift.startTime" format="HH:mm" value-format="HH:mm"
                      placeholder="请选择" style="width: 150px" />
                  </div>
                  <div class="time-input-item">
                    <span class="time-label">结束时间</span>
                    <el-time-picker v-model="morningShift.endTime" format="HH:mm" value-format="HH:mm" placeholder="请选择"
                      style="width: 150px" />
                  </div>
                </div>
              </div>

              <!-- 下午班次 -->
              <div class="shift-setting">
                <div class="shift-title">下午班次</div>
                <div class="time-inputs">
                  <div class="time-input-item">
                    <span class="time-label">开始时间</span>
                    <el-time-picker v-model="afternoonShift.startTime" format="HH:mm" value-format="HH:mm"
                      placeholder="请选择" style="width: 150px" />
                  </div>
                  <div class="time-input-item">
                    <span class="time-label">结束时间</span>
                    <el-time-picker v-model="afternoonShift.endTime" format="HH:mm" value-format="HH:mm"
                      placeholder="请选择" style="width: 150px" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 工作时长 -->
          <div class="form-section">
            <div class="form-label">工作时长</div>
            <div class="duration-input">
              <span class="duration-label">每班次大于等于</span>
              <el-input-number v-model="workDuration" :min="0" :max="1440" :precision="0"
                style="width: 120px; margin: 0 8px" />
              <span class="duration-unit">分钟</span>
            </div>
          </div>

          <!-- 节假日 -->
          <div class="form-section">
            <div class="form-label">节假日</div>
            <div class="holiday-setting">
              <span class="holiday-label">法定节假日自动排休</span>
              <el-switch v-model="autoHoliday" active-color="#2263bf" />
            </div>
          </div>
        </div>

        <!-- 右侧：考勤范围设置 -->
        <div class="right-section">
          <div class="title-header">
            <div class="section-title">
              <div class="title-bar"></div>
              <div class="title-text">考勤范围</div>
            </div>
          </div>
          <div class="range-map">
            <OpenlayerMap :showPanel="false" :area="attendanceArea" :line="attendanceLine"></OpenlayerMap>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { WarningFilled, MapLocation } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import OpenlayerMap from "@/components/openlayer/openlayer.vue";

// 工作日设置
const weekdays = ref([
  { label: "周一", checked: false },
  { label: "周二", checked: false },
  { label: "周三", checked: false },
  { label: "周四", checked: false },
  { label: "周五", checked: true },
  { label: "周六", checked: false },
  { label: "周日", checked: false },
]);

// 上午班次
const morningShift = reactive({
  startTime: null,
  endTime: null,
});

// 下午班次
const afternoonShift = reactive({
  startTime: null,
  endTime: null,
});

// 工作时长（分钟）
const workDuration = ref(110);

// 法定节假日自动排休
const autoHoliday = ref(true);

// 考勤范围数据（写死）
const attendanceArea = ref([
  {
    id: 1,
    polygon: [
      [
        [117.76539322860397, 39.033600999852275],
        [117.72481595912116, 39.02303400259113],
        [117.74468191397212, 38.96850829672361],
        [117.77722826553645, 38.990064971136356],
        [117.77596022586512, 39.00570412708285],
        [117.76539322860397, 39.033600999852275],
      ],
    ],
  },
]);

// 考勤范围线路数据（写死）
const attendanceLine = ref([
  {
    id: 1,
    line: [
      [117.76539322860397, 39.033600999852275],
      [117.72481595912116, 39.02303400259113],
      [117.74468191397212, 38.96850829672361],
    ],
  },
]);

// 初始化数据
onMounted(() => {
  // TODO: 从接口加载数据
  loadSettings();
});

// 加载设置数据
const loadSettings = async () => {
  try {
    // TODO: 调用接口获取设置数据
    // const { data } = await getAttendanceSettings();
    // 设置数据...
  } catch (error) {
    console.error("加载设置失败：", error);
  }
};

// 保存设置
const handleSave = async () => {
  try {
    // 验证数据
    if (!morningShift.startTime || !morningShift.endTime) {
      ElMessage.warning("请设置上午班次的完整时间段");
      return;
    }
    if (!afternoonShift.startTime || !afternoonShift.endTime) {
      ElMessage.warning("请设置下午班次的完整时间段");
      return;
    }

    const checkedDays = weekdays.value.filter((day) => day.checked);
    if (checkedDays.length === 0) {
      ElMessage.warning("请至少选择一个工作日");
      return;
    }

    // 准备保存数据
    const settingsData = {
      weekdays: weekdays.value.map((day, index) => ({
        day: index + 1,
        label: day.label,
        checked: day.checked,
      })),
      morningShift: {
        startTime: morningShift.startTime,
        endTime: morningShift.endTime,
      },
      afternoonShift: {
        startTime: afternoonShift.startTime,
        endTime: afternoonShift.endTime,
      },
      workDuration: workDuration.value,
      autoHoliday: autoHoliday.value,
    };

    // TODO: 调用接口保存数据
    // const { data } = await saveAttendanceSettings(settingsData);

    ElMessage.success("保存成功");
  } catch (error) {
    console.error("保存设置失败：", error);
    ElMessage.error("保存失败，请重试");
  }
};
</script>

<style lang="scss" scoped>
.attendance-settings-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .header {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;


    .header-left {
      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
      }
    }

    .header-right {
      .el-button {
        background: #2263bf;
        border-color: #2263bf;
        width: 100px;
        height: 36px;
      }
    }
  }

  .main-content {
    padding: 0;
    background: transparent;

    .content-wrapper {
      display: flex;
      gap: 20px;
      height: 100%;

      .left-section,
      .right-section {
        flex: 1;
        background: #ffffff;
        border-radius: 6px;
        padding: 20px;
        box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
      }

      .title-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;

        .section-title {
          display: flex;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #2263BF;
          white-space: nowrap;
          flex-shrink: 0;

          .title-bar {
            width: 3px;
            height: 16px;
            background-color: #2263bf;
            margin-right: 9px;
            flex-shrink: 0;
          }

          .title-text {
            flex-shrink: 0;
            white-space: nowrap;
          }
        }

        .warning-banner {
          display: flex;
          align-items: center;

          .warning-icon {
            font-size: 18px;
            color: #faad14;
            margin-right: 8px;
          }

          .warning-text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #faad14;
          }
        }
      }

      // 左侧样式
      .left-section {

        .form-section {
          margin-bottom: 30px;
          padding-left: 30px;

          &:last-child {
            margin-bottom: 0;
          }

          .form-label {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            margin-bottom: 12px;
          }

          .weekday-checkboxes {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;

            .weekday-checkbox {
              :deep(.el-checkbox__label) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
              }
            }
          }

          .shifts-container {
            display: flex;
            gap: 20px;
            align-items: flex-start;
          }

          .shift-setting {
            width: 350px;
            height: 150px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: #EDF5FF;
            box-shadow: inset 0px 0px 3px 0px rgba(71, 136, 223, 0.31);
            padding: 0 40px;

            .shift-title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 14px;
              color: #333333;
              margin-bottom: 12px;
            }

            .time-inputs {
              display: flex;
              gap: 20px;

              .time-input-item {
                display: flex;
                flex-direction: column;
                gap: 8px;

                .time-label {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 14px;
                  color: #666666;
                  white-space: nowrap;
                }
              }
            }
          }

          .duration-input {
            display: flex;
            align-items: center;

            .duration-label {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
            }

            .duration-unit {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
            }
          }

          .holiday-setting {
            display: flex;
            align-items: center;
            gap: 10px;

            .holiday-label {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
            }
          }
        }
      }

      // 右侧样式
      .right-section {
        display: flex;
        flex-direction: column;

        .range-map {
          flex: 1;
          min-height: 400px;
          border-radius: 4px;
          overflow: hidden;

          :deep(.home) {
            width: 100%;
            height: 100%;

            #mapCon {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
// 全局样式调整
.attendance-settings-container {
  .el-checkbox {
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #2263bf;
      border-color: #2263bf;
    }

    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #2263bf;
    }
  }

  .el-input-number {
    .el-input__inner {
      text-align: center;
    }
  }

  .el-switch {
    .el-switch__core {
      width: 44px;
      height: 22px;

      &::after {
        width: 18px;
        height: 18px;
      }
    }

    &.is-checked .el-switch__core {
      background-color: #2263bf;
    }
  }
}
</style>
